<template>
    <div id="purchaseTake">
      <h1>采购收货/入库</h1>
      <el-form :model="purchaseAndDetail" >
        <div style="text-align: right">
          <el-button type="success" @click="gatherBtn" plain>确定收货/入库</el-button>
          <el-button plain @click="showAddDialog">返回</el-button>
        </div>
        <br><br>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-form-item label="采购单编号:" label-width="">
            <el-input v-model="purchaseAndDetail.purchaseOrder.purchaseOrderNumber"  readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
          <el-form-item label="总数量:" label-width="" >
            <el-input v-model="purchaseAndDetail.purchaseOrder.totalAmount"   readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
          <el-form-item label="总价格:" label-width="" >
            <el-input v-model="purchaseAndDetail.purchaseOrder.totalPrice"  readonly ></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-row :gutter="20" id="row1">
        <el-col :span="6" ><div class="grid-content bg-purple">
          <el-form-item label="登记人:" label-width="" >
            <el-input v-model="purchaseAndDetail.purchaseOrder.register"   readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="6" :offset="2"><div class="grid-content bg-purple">
          <el-form-item label="登记时间:" label-width="" >
            <el-input v-model="purchaseAndDetail.purchaseOrder.registerTime"  readonly ></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>

      <el-table :data="purchaseAndDetail.purchaseOrderDetails" style="width: 100%">
        <el-table-column prop="id" label="编号" width="160">
        </el-table-column>
        <el-table-column
            prop="imgLink"
            label="商品图片">
          <template slot-scope="scope">
            <el-avatar :size="45" shape="square" :src="scope.row.imgLink" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="count" label="采购数量">
        </el-table-column>
        <el-table-column prop="price" label="单价(元)">
        </el-table-column>
        <el-table-column
            label="仓库(最大储存/当前已储存)">
          <template slot-scope="scope">
            <el-select v-model="scope.row.warehouseId" placeholder="请选择" clearable>
              <el-option
                  v-for="item in warehouse"
                  :key="item.warehouseId"
                  :label="item.warehouseName+'('+item.maxCapacityAmount+'/'+item.nowAmount+')'"
                  :value="item.warehouseId">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

      </el-table>

      <div class="div1">
        <el-row :gutter="20">
          <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
            <el-form-item label="入库人:" label-width="">
              <el-input v-model="purchaseAndDetail.register"  placeholder="请输入入库人"></el-input>
            </el-form-item>
          </div></el-col>
          
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
            <el-form-item label="入库理由:" label-width="">
              <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="purchaseAndDetail.reasonexact"
                  maxlength="50"
                  show-word-limit
                  style="width: 1000px"
              >
              </el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
      </div>
      </el-form>
    </div>
</template>

<script>
export default {
  name: "PurchaseTake",
  data() {
    return {
      //仓库
      warehouse:[],

      //采购单id
      purchaseId: "",

      purchaseAndDetail: [],

    }
  },
  methods: {
    //仓库
    async queryWarehouse() {
      const { data: res } = await this.$http.post(`/warehouse/queryWarehouse`);
      this.warehouse = res
    },
    //确定收货/入库
    async gatherBtn() {
      const { data: res } = await this.$http.post('/gather/gatherMake',this.purchaseAndDetail);
      this.$message.success(res);
    },
    //返回
    showAddDialog() {
      this.$router.push("purchase");
    },
    //采购单和采购明细
    async queryPurchaseAndDetail() {
      const { data: res} = await this.$http.post(`/purchaseOrder/queryPurchaseAndDetail/${this.purchaseId}`);
      this.purchaseAndDetail = res;
    },
    //图片展示失败
    errorHandler() {
      return true
    },
  },
  created() {
    //采购单id
    this.purchaseId = this.$route.query.id;

    this.queryPurchaseAndDetail();

    //仓库
    this.queryWarehouse();
  }
}
</script>

<style scoped>

</style>